<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item :label="$t('时间')">
          <el-link type="primary" @click="weekTotal" :v-permission="['GET /admin/p/reward_distribution_log_statistic']">{{$t('最近一周')}}</el-link>
          <el-link type="primary" @click="monthTotal" :v-permission="['GET /admin/p/reward_distribution_log_statistic']">{{$t('最近一个月')}}</el-link>
        </el-form-item>
        <el-form-item :label="$t('自定义时间')">
          <el-date-picker
            v-model="totalRange"
            type="daterange"
            :range-separator='$t("至")'
            :start-placeholder='$t("开始日期")'
            :end-placeholder='$t("结束日期")'
            value-format="yyyy-MM-dd"
            :v-permission="['GET /admin/p/reward_distribution_log_statistic']"
          @change="changeDate">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div class="Condetailed">
        <div class="block">
          <div class="demonstration">{{this.totalData.ruleNum}}</div>
          <div>{{$t("规则条数")}}</div>
        </div>
        <div class="block" style="width: 240px">
          <div class="demonstration">{{this.totalData.distributeNum}}</div>
          <div style="width: 200px;margin-left:16px " >{{$t("累计推广获得用户")}}</div>
        </div>
        <div class="block" style="width: 240px">
          <div class="demonstration">{{this.totalData.couponNum}}</div>
          <div style="width: 200px;margin-left:16px ">{{$t("累计送出优惠券")}}</div>
        </div>
        <div class="block" style="width: 240px">
          <div class="demonstration">{{this.totalData.points}}</div>
          <div style="width: 200px;margin-left:16px ">{{$t("累计送出积分")}}</div>
        </div>
      </div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item :label="$t('时间')">
          <el-link type="primary" @click="sevenStatistic" :v-permission="['GET /admin/p/reward_distribution_log_statistic']">{{$t('最近一周')}}</el-link>
          <el-link type="primary" @click="twentyStatistic" :v-permission="['GET /admin/p/reward_distribution_log_statistic']">{{$t('最近一个月')}}</el-link>
        </el-form-item>
        <el-form-item :label="$t('自定义时间')">
          <el-date-picker
            v-model="picRange"
            type="daterange"
            :range-separator='$t("至")'
            :start-placeholder='$t("开始日期")'
            :end-placeholder='$t("结束日期")'
            value-format="yyyy-MM-dd"
            :v-permission="['GET /admin/p/reward_distribution_log_statistic']"
            @change="changeDatePic">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div id="chartLineBox" style="width: 90%;height: 70vh;"></div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts'
import ElSelectDropdown from 'element-ui/packages/select/src/select-dropdown'
import { distributionStatistic, rewardStatistic } from '../../api/distribution'
import { formatDate } from '@/utils/date'

export default {
  name: 'DistributionStatistics',
  data() {
    const typeMap = ['', this.$t('全场通用')]
    const startDate = formatDate(new Date(new Date().getTime() - 3600 * 1000 * 24 * 7), 'yyyy-MM-dd')
    const endDate = formatDate(new Date(), 'yyyy-MM-dd')
    return {
      value1: '',
      value2: '',
      data1: ['January', 'February', 'March', 'April', 'Mary', 'June', 'July'],
      // data2: ['2022-1-1', '2022-2-1', '2022-3-1', '2022-4-1', '2022-5-1', '2022-6-1', '2022-7-1', '2022-8-1', '2022-2-1', '2022-3-1', '2022-4-1', '2022-5-1', '2022-6-1', '2022-7-1', '2022-8-1', '2022-2-1', '2022-3-1', '2022-4-1', '2022-5-1', '2022-6-1', '2022-7-1', '2022-8-1', '2022-2-1', '2022-3-1', '2022-4-1', '2022-5-1', '2022-6-1', '2022-7-1', '2022-8-1', '2022-2-1', '2022-3-1', '2022-4-1', '2022-5-1', '2022-6-1', '2022-7-1', '2022-8-1'],
      // data3: [220, 232, 201, 234, 290, 230, 220],
      data5: [120, 332, 231, 134, 190, 130, 280],
      // data4: [220, 232, 201, 234, 290, 230, 220, 232, 201, 234, 290, 230, 220, 232, 201, 234, 290, 230, 220, 232, 201, 234, 290, 230, 220, 232, 201, 234, 290, 230, 220, 232, 201, 234, 290, 230, 220],
      weeks: [],
      months: [],
      totalRange: [startDate, endDate],
      picRange: [startDate, endDate],
      formInline: {
        levelMemberName: undefined,
        page: 1,
        limit: 20,
        sort: 'add_time',
        order: 'desc'
      },
      totalData: {
        ruleNum: undefined,
        distributeNum: undefined,
        couponNum: undefined,
        points: undefined
      }
    }
  },
  created() {
    //   this.getList()
    this.weeks = this.data1
    this.months = this.data3
  },
  mounted() {
    this.getList()
    this.defaultData()
  },
  methods: {
    defaultData(){
      const startDate = formatDate(new Date(new Date().getTime() - 3600 * 1000 * 24 * 7), 'yyyy-MM-dd')
      const endDate = formatDate(new Date(), 'yyyy-MM-dd')
      rewardStatistic(startDate,endDate).then(response => {
        this.totalData = response.data.data;
      })

      distributionStatistic(startDate,endDate).then(response => {

        this.weeks = response.data.data.dateStr;
        this.data5 = response.data.data.inviteNums;
        this.getList()
      })
    },
    weekTotal(){
      var date1 = new Date()
        var month1 = date1.getMonth() + 1
      var day1 = date1.getDate() + 1;
      var time1 = date1.getFullYear() + '-' + (month1 < 10 ? ('0' + month1) :month1) + '-' + (day1< 10 ? ('0' + day1) :day1 )//time1表示当前时间
      // console.log(time1)
      var date2 = new Date(date1)
      date2.setDate(date1.getDate() - 7)
      // console.log(date2)
      var month2 = date2.getMonth() + 1
      var day2 = date2.getDate() + 1;

      var time2 = date2.getFullYear() + '-' + (month2 < 10 ? ('0' +month2) :month2 ) + '-' + (day2  < 10 ? ('0' + day2) :day2)//time1表示当前时间
      // this.weeks = this.data1
      // this.months = this.data3
      // console.log(this.data1)
      // this.getList()
      rewardStatistic(time2,time1).then(response => {
        this.totalData = response.data.data;
      })
    },
    monthTotal(){
      var date1 = new Date()
      var month1 = date1.getMonth() + 1
      var day1 = date1.getDate() + 1;
      var time1 = date1.getFullYear() + '-' + (month1 < 10 ? ('0' + month1) :month1) + '-' + (day1< 10 ? ('0' + day1) :day1 )//time1表示当前时间
      // console.log(time1)
      var date2 = new Date(date1)
      date2.setDate(date1.getDate() - 30)
      console.log(date2)
      var month2 = date2.getMonth() + 1
      var day2 = date2.getDate() + 1;

      var time2 = date2.getFullYear() + '-' + (month2 < 10 ? ('0' +month2) :month2 ) + '-' + (day2  < 10 ? ('0' + day2) :day2)//time1表示当前时间
      // this.weeks = this.data1
      // this.months = this.data3
      // console.log(this.data1)
      // this.getList()
      rewardStatistic(time2,time1).then(response => {
        this.totalData = response.data.data;
      })
    },
    sevenStatistic(){
      console.log(111)
      var date1 = new Date()
      var month1 = date1.getMonth() + 1
      var day1 = date1.getDate() + 1;
      var time1 = date1.getFullYear() + '-' + (month1 < 10 ? ('0' + month1) :month1) + '-' + (day1< 10 ? ('0' + day1) :day1 )//time1表示当前时间
      // console.log(time1)
      var date2 = new Date(date1)
      date2.setDate(date1.getDate() - 7)
      // console.log(date2)
      var month2 = date2.getMonth() + 1
      var day2 = date2.getDate() + 1;

      var time2 = date2.getFullYear() + '-' + (month2 < 10 ? ('0' +month2) :month2 ) + '-' + (day2  < 10 ? ('0' + day2) :day2)//time1表示当前时间
      // this.weeks = this.data1
      // this.months = this.data3
      // console.log(this.data1)
      // this.getList()
      distributionStatistic(time2,time1).then(response => {

        this.weeks = response.data.data.dateStr;
        this.data5 = response.data.data.inviteNums;
        this.getList()
      })
    },
    twentyStatistic(){
      var date1 = new Date()
      var month1 = date1.getMonth() + 1
      var day1 = date1.getDate() + 1;
      var time1 = date1.getFullYear() + '-' + (month1 < 10 ? ('0' + month1) :month1) + '-' + (day1< 10 ? ('0' + day1) :day1 )//time1表示当前时间
      // console.log(time1)
      var date2 = new Date(date1)
      date2.setDate(date1.getDate() - 30)
      // console.log(date2)
      var month2 = date2.getMonth() + 1
      var day2 = date2.getDate() + 1;

      var time2 = date2.getFullYear() + '-' + (month2 < 10 ? ('0' +month2) :month2 ) + '-' + (day2  < 10 ? ('0' + day2) :day2)//time1表示当前时间
      // this.weeks = this.data1
      // this.months = this.data3
      // console.log(this.data1)
      // this.getList()
      distributionStatistic(time2,time1).then(response => {

        this.weeks = response.data.data.dateStr;
        this.data5 = response.data.data.inviteNums;
        this.getList()
      })
    },
    getList() {
      this.chartLine = echarts.init(document.getElementById('chartLineBox'))

      // 指定图表的配置项和数据
      var option = {
        tooltip: {              //设置tip提示
          trigger: 'axis'
        },

        // legend: {               //设置区分（哪条线属于什么）
        //     data:['平均成绩','学生成绩']
        // },
        color: ['#ccc', '#97bbcd'],
        axisTick: {
          alignWithLabel: true
        },     //设置区分（每条线是什么颜色，和 legend 一一对应）
        xAxis: {                //设置x轴
          type: 'category',
          boundaryGap: false,     //坐标轴两边不留白
          data: this.weeks,
          // name: 'DATE',           //X轴 name
          nameTextStyle: {        //坐标轴名称的文字样式
            color: '#97bbcd',
            fontSize: 16,
            padding: [0, 0, 0, 20]
          },
          axisLine: {             //坐标轴轴线相关设置。
            lineStyle: {
              color: '#333'
            }
          }
        },
        yAxis: {
          // name: 'SALES VOLUME',
          nameTextStyle: {
            color: '#97bbcd',
            fontSize: 16,
            padding: [0, 0, 10, 0]
          },
          axisLine: {
            lineStyle: {
              color: '#333'
            }
          },
          axisTick: {
            length: 1
          },
          yAxisAxisStick: {
            length: 1
          },

          type: 'value'
        },
        series: [
          {
            areaStyle: {},
            name: this.$t('用户推广数量'),
            data: this.data5,
            smooth: true,
            type: 'line',               // 类型为折线图
            lineStyle: {                // 线条样式 => 必须使用normal属性
              normal: {
                color: '#ccc'
              }
            }
          },
          {
            areaStyle: {},
            name: this.$t('用户激活数量'),
            data: this.months,
            type: 'line',
            smooth: true,
            lineStyle: {
              normal: {
                color: '#97bbcd'
              }
            }
          }
        ]

      }

      // 使用刚指定的配置项和数据显示图表。
      this.chartLine.setOption(option)
    },
    changeDate(value){
      rewardStatistic(value[0],value[1]).then(response => {
        this.totalData = response.data.data;
      })
    },
    changeDatePic(value){
      distributionStatistic(value[0],value[1]).then(response => {
        this.weeks = response.data.data.dateStr;
        this.data5 = response.data.data.inviteNums;
        this.getList()
      })
    }

  }
}
</script>

<style scoped>
.Condetailed {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}

.Condetailed .block {
  border: 1px solid #333;
  width: 183px;
  height: 170px;
  margin: 0 20px 20px 20px;
  line-height: 91px;
  text-align: center;
}

.Condetailed .block .demonstration {
  font-size: 60px;
  font-weight: 400;
  color: #333333;
}
</style>
